<template>
    <el-container>
        <el-header>
            <span class="h1">
                <img src="@/assets/img/logo2.png" />
            </span>
            <div style="margin-left: 270px;margin-top: -40px;">
                <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" text-color="#141414" background-color="#bbd7e4"
                    active-text-color="#dc1111">
                    <!-- <el-menu-item index="1">旅游管理系统</el-menu-item> -->
                    <el-menu-item index="1" @click="toVsHome()">首页</el-menu-item>
                    <el-menu-item index="2" @click="toScenic()">景点信息</el-menu-item>
                    <el-menu-item index="3" @click="toVsFood()">美食信息</el-menu-item>
                    <el-menu-item index="4">酒店信息</el-menu-item>
                    <!-- <el-menu-item index="5">旅游路线信息</el-menu-item>
          <el-menu-item index="6">交流论坛</el-menu-item> -->
                    <el-menu-item index="7" v-if="user.roleId === 1" @click="toHoutai()">后台管理</el-menu-item>
                    <el-menu-item index="8" @click="toVsPerson()">个人中心</el-menu-item>

                    <div>
                        <el-submenu index="9" class="submenu">
                            <template slot="title">{{ user.name }}
                                <el-avatar shape="circle" :size="40" :src="user.cover"></el-avatar>
                            </template>
                            <el-menu-item index="9-1" @click="toVsPerson()">个人中心</el-menu-item>
                            <!-- <el-menu-item index="8-2">我的收藏</el-menu-item> -->
                            <el-menu-item index="9-3" @click="quit()">退出登录</el-menu-item>
                        </el-submenu>
                    </div>
                </el-menu>
            </div>
        </el-header>
        <el-main>
            <div class="foodMain" style="" v-for="hotel in hotels.slice(0,limit)" :key="hotel.id" :label="hotel.cover" :value="hotel.id">

                <div class="f2">
                    <span class="title">{{ hotel.name }}</span>
                    <div class="concent">{{ hotel.concent }}</div>
                </div>
                <div class="f1">
                    <img :src="hotel.cover" class="image">
                </div>
            </div>
        </el-main>
    </el-container>
</template>

<script>
export default {
    name: "VsFood",
    data() {
        return {
            user: JSON.parse(sessionStorage.getItem('CurUser')),
            activeIndex: '1',
            activeIndex2: '4',
            hotels: [],
            limit: 6,    //只显示前三项
        };
    },

    //获取数据
    mounted() {
        this.fetchHotel();
    },
    methods: {
        //获取酒店信息
        fetchHotel() {
            this.$axios.post(this.$httpUrl + '/hotel/listPage', {
            }).then(res => res.data).then(res => {
                console.log(res)
                if (res.code == 200) {
                    this.hotels = res.data;
                }
            }).catch(error => {
                console.error("查询景点分类信息异常：", error);
            });
        },
        //各路由跳转
        toHoutai() {
            this.$router.replace('Person');
        },
        //前端的个人中心
        toVsPerson() {
            this.$router.replace('VsPerson');
        },
        //退出登录
        quit() {
            this.$router.replace('/');
        },
        //前端首页
        toVsHome() {
            this.$router.replace('VsHome');
        },
        //景点信息
        toScenic() {
            this.$router.replace('VsScenic');
        },
        //美食信息
        toVsFood() {
            this.$router.replace('VsFood');
        },
    },
}
</script>

<style scoped>
.element.style {
    width: 120px;
}

img {
    width: 120px;

}

.el-header {
    /* background-color: #545c64; */
    color: black;
    background-color: #bbd7e4;
    border-bottom: 1px solid rgb(209, 207, 207);
    border-top: 1px solid rgb(209, 207, 207);
    line-height: 60px;
}

.el-main {
    /* background-color: #E9EEF3; */
    /* background: url(@/assets/img/bj1.jpg) no-repeat; */
    color: #333;
    text-align: center;
    /* height: 600px; */

}

.el-menu-demo {
    /* width: 100%; */
    background-color: #bbd7e4;
    /* background-color: #545c64; */
    margin-left: 100px;
    margin-top: -76px;

}

/* 导航栏下拉框右侧 */
.submenu {
    /* border: 1px solid black; */
    width: 150px;
    margin-left: 800px;
    /* margin-top: -32px; */
    height: 50px;
}

/* 内容 */
.foodMain {
    width: 70%;
    height: 220px;
    margin: auto;
    display: flex;
    border: 1px dashed #ccc;
    margin-top: 20px;
    transition: transform 0.3s ease;
    /* 添加过渡效果 */
}

.foodMain:hover {
    transform: scale(1.1);
    /* 鼠标悬停时放大 */
}

.f1 {
    width: 40%;
    height: 220px;
    display: block;
    /* border: 1px solid black; */
}

.f2 {
    width: 60%;
    height: 220px;
    display: block;
    background-color: rgb(230, 227, 227);
    /* border: 1px solid black; */
}

.image {
    width: 100%;
    height: 200px;
    display: block;
}

.title {
    width: 50px;
    height: 50px;
    font-size: 20px;
    margin-top: 50px;
    /* border: 2px solid rgb(231, 16, 16); */
}

.concent {
    width: 500px;
    height: 180px;
    margin-left: 25px;
    text-align: left;
    margin-top: 20px;
    /* 文字左对齐 */
    text-indent: 2em;
    /* 首句空两格，1em约等于一个汉字的宽度 */

}
</style>